<template>
  <div>
    <div class="global">
      <el-card class="flex">
        <div id="main1" style="width: 100%;height: 300px;"></div>
      </el-card>
      <el-card class="flex">
        <div id="main2" style="width: 100%;height: 300px;"></div>
      </el-card>

    </div>
    <el-card class="flex" style="width: 100%;margin-top: 10px">
      <div id="main3" style="width: 100%;height: 300px;"></div>

    </el-card>
  </div>
</template>
<script>
import service from '@/request';
import * as echarts from "echarts";
export default {
  data() {
    return {
      info1: {},
      info2: {},
      info3: {},
      info4: {},
    }
  },
  mounted() {
    this.getdata2()

    this.getdata()
    this.getdata1()
  },
  methods: {
    async getdata() {

      const myChart = echarts.init(document.getElementById("main1"));// 图标初始化
      myChart.clear()
      const res = await service.get("/index/type");
      console.log(res);

      const option = {
        title: {
          text: "各类型成果数量统计"
        },
        tooltip: {
          trigger: "item"
        },
        xAxis: {
          type: 'category',
          data: res.data.xdata
        },
        yAxis: {
          type: 'value',
          name: "数量"
        },
        series: [
          {
            data: res.data.ydata,
            type: 'bar'
          }
        ]

      };

      myChart.setOption(option);// 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });

    },
    async getdata1() {

      const myChart = echarts.init(document.getElementById("main2"));// 图标初始化
      myChart.clear()
      const res = await service.get("/index/downloadTop5");
      console.log(res);
      const option = {
        title: {
          text: "成果下载数量top5"
        },
        tooltip: {
          trigger: "item"
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0, // 控制标签的显示间隔，0 表示全部显示，可以根据需要调整
            rotate: 45 // 控制标签的旋转角度，以避免重叠
          },
          data: res.data.xdata
        },
        yAxis: {
          type: 'value',
          name: "数量",

        },
        series: [
          {
            data: res.data.ydata,
            type: 'bar',
            barWidth: 50
          }
        ]

      };
      myChart.setOption(option);// 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });

    },
    async getdata2() {
      const myChart = echarts.init(document.getElementById("main3"));// 图标初始化
      myChart.clear()
      const res = await service.get("/index/teacherAchievement");
      console.log(res);
      const option = {
        title: {
          text: '各教师成果数量',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '成果数量',
            type: 'pie',
            radius: '50%',
            data: res.data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option);// 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
}
</script>
<style scoped>
.img img {
  width: 100%;
  height: 100%;
}

.img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.flex {
  width: 48%;
  height: 350px;
  float: left;
  margin-right: 10px;
}

.item {
  width: 24%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: #fff;
}

.global {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
</style>